import 'dart:core';

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';

class HomeIndex extends StatefulWidget {
  const HomeIndex({super.key});

  @override
  State<HomeIndex> createState() => _HomeIndexState();
}

class Goods {
  final String imageUrl;
  final String price;

  Goods(this.imageUrl, this.price);
}

List<Goods> goodsList = [
  Goods(
    'https://m.360buyimg.com/seckillcms/jfs/t1/124588/9/32568/76562/648a881fF41c5e7ee/8c7c05048bd690be.jpg',
    '¥9.9',
  ),
  Goods(
    'https://m.360buyimg.com/seckillcms/jfs/t1/172629/29/53349/230394/6756ea32F025f3a56/b53b1246de5f2089.jpg',
    '¥3761',
  ),
  Goods(
    'https://m.360buyimg.com/seckillcms/jfs/t1/246855/14/27706/94197/6757cefaF231ab4ba/475b2e0114323e73.jpg',
    '¥4.32',
  ),
  Goods(
    'https://img11.360buyimg.com/n2/s240x240_jfs/t1/199402/29/52619/26978/6756cb89F49485e6b/00ac2431961afde5.png!q70.jpg.webp',
    '¥6999',
  ),
  Goods(
    'https://m.360buyimg.com/seckillcms/jfs/t1/124588/9/32568/76562/648a881fF41c5e7ee/8c7c05048bd690be.jpg',
    '¥199',
  ),
  Goods(
    'https://m.360buyimg.com/seckillcms/jfs/t1/124588/9/32568/76562/648a881fF41c5e7ee/8c7c05048bd690be.jpg',
    '¥199',
  ),
  Goods(
    'https://m.360buyimg.com/seckillcms/jfs/t1/124588/9/32568/76562/648a881fF41c5e7ee/8c7c05048bd690be.jpg',
    '¥199',
  ),
  Goods(
    'https://m.360buyimg.com/seckillcms/jfs/t1/124588/9/32568/76562/648a881fF41c5e7ee/8c7c05048bd690be.jpg',
    '¥199',
  ),
];

class _HomeIndexState extends State<HomeIndex> {
  final List<Map<String, dynamic>> items = List.generate(
    20,
    (index) => {
      'image':
          'https://img10.360buyimg.com/n2/s240x240_jfs/t1/145307/22/41197/71267/65b5d932Fb67b2c27/cd986ae610999146.jpg!q70.jpg.webp',
      'title': '宁雨昔美式复古字母三条杠圆领短袖T恤女纯棉宽松2024夏季新款学生上衣 白色 M',
      'price': 298,
      'height': 150 + index * 5, // 使每个商品的高度略有不同，模拟瀑布流
    },
  );

  final List<String> imgList = [
    'https://example.com/1.jpg',
    'https://example.com/2.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //顶部搜索框
      appBar: AppBar(
        toolbarHeight: 50,
        backgroundColor: Colors.red,
        title: GestureDetector(
          onTap: () => {
            // print('单击事件');
            Navigator.pushNamed(context, '/category/search_hot'),
          },
          // onDoubleTap: () => print('双击事件'),
          // onLongPress: () => print('长按事件'),
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 8, vertical: 5),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(30.0), // 圆角半径
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(Icons.search),
                Text('🍃热爱教育·用心服务💕', style: TextStyle(fontSize: 12)),
                Text('搜索', style: TextStyle(fontSize: 14, color: Colors.red)),
              ],
            ),
          ),
        ),
        actions: [
          TextButton(
            child: Text(
              '登录',
              style: TextStyle(fontSize: 18, color: Colors.white),
            ),
            onPressed: () {
              Navigator.pushNamed(context, '/account/sms_login');
            },
          ),
        ],
      ),
      //主体部分
      body: SingleChildScrollView(
        child: Column(
          children: [
            //轮播图
            Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.red, Colors.white],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                ),
              ),
              width: double.infinity,
              height: 210,
              child: Container(
                margin: EdgeInsets.all(10),
                color: Colors.white,
                child: Swiper(
                  itemBuilder: (BuildContext context, int index) {
                    return GridView.count(
                      crossAxisCount: 4,
                      children: swiperList,
                    );
                  },
                  itemCount: 2,
                  pagination: new SwiperPagination(
                    builder: DotSwiperPaginationBuilder(
                      color: Colors.grey,
                      activeColor: Colors.red,
                    ),
                  ),
                  // control: SwiperControl(),
                ),
              ),
            ),
            SizedBox(height: 5),
            //秒杀
            Container(
              margin: EdgeInsets.all(10),
              width: double.infinity,
              height: 130,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
                color: Colors.red,
              ),
              child: Padding(
                padding: EdgeInsets.all(8),
                child: Row(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(top: 10),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Image.network(
                            'https://img30.360buyimg.com/img/jfs/t1/227615/23/8080/1616/65782dd8F605d99af/0d97136b32d5ab1b.png',
                            width: 100,
                          ),
                          Text(
                            '限时低价',
                            style: TextStyle(fontSize: 24, color: Colors.white),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 5),
                            padding: EdgeInsets.symmetric(
                              vertical: 8,
                              horizontal: 16,
                            ),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(15),
                              color: Colors.white,
                            ),
                            child: Row(
                              children: [
                                Text(
                                  '去抢购',
                                  style: TextStyle(color: Colors.red),
                                ),
                                Image.network(
                                  'https://img20.360buyimg.com/img/jfs/t1/238192/15/7188/265/65783069F1178bf7d/b15fdc2244088b71.png',
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    Expanded(
                      child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: goodsList.length,
                        itemBuilder: (context, index) {
                          return Container(
                            color: Colors.white,
                            width: 60,
                            margin: EdgeInsets.symmetric(
                              vertical: 10,
                              horizontal: 5,
                            ),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Image.network(
                                  goodsList[index].imageUrl,
                                  width: 50,
                                ),
                                Text(goodsList[index].price),
                              ],
                            ),
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),
            //瀑布流
            StaggeredGridView.countBuilder(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              crossAxisCount: 4,
              // 定义列数
              itemCount: 20,
              // 定义项目总数
              itemBuilder: (BuildContext context, int index) => Container(
                margin: EdgeInsets.symmetric(vertical: 4, horizontal: 4),
                child: Card(
                  color: Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0), // 卡片的圆角
                  ),
                  child: Padding(
                    padding: EdgeInsets.only(top: 10, left: 10, right: 10),
                    child: GestureDetector(
                      onTap: () => {
                        // print('单击事件');
                        Navigator.pushNamed(context, '/goods/detail'),
                      },
                      // onDoubleTap: () => print('双击事件'),
                      // onLongPress: () => print('长按事件'),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Image.network(
                            items[index]['image'],
                            height: items[index]['height'].toDouble(),
                          ),
                          Text(
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                            items[index]['title'],
                          ),
                          Text(
                            '已销售2.9万件',
                            style: TextStyle(color: Colors.grey),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '¥${items[index]['price']}',
                                style: TextStyle(color: Colors.red),
                              ),
                              IconButton(
                                onPressed: () {},
                                icon: Icon(Icons.shopping_cart),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              staggeredTileBuilder: (int index) =>
                  StaggeredTile.fit(2), // 定义每个项目的跨列数和跨行数
            ),
          ],
        ),
      ),

      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(child: Text('抽屉式导航栏')),
            ListTile(leading: Icon(Icons.home), title: Text('首页')),
            // 更多列表项...
          ],
        ),
      ),
      // 可选：添加底部导航栏
      // bottomNavigationBar: BottomNavigationBar(
      //   // ...
      // ),
    );
  }
}

List<Widget> swiperList = [
  Column(
    children: [
      Image.network(
        'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png',
        width: 50,
      ),
      Text('京东超市', style: TextStyle(fontSize: 14)),
    ],
  ),
  Column(
    children: [
      Image.network(
        'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png',
        width: 50,
      ),
      Text('京东超市', style: TextStyle(fontSize: 14)),
    ],
  ),
  Column(
    children: [
      Image.network(
        'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png',
        width: 50,
      ),
      Text('京东超市', style: TextStyle(fontSize: 14)),
    ],
  ),
  Column(
    children: [
      Image.network(
        'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png',
        width: 50,
      ),
      Text('京东超市', style: TextStyle(fontSize: 14)),
    ],
  ),
  Column(
    children: [
      Image.network(
        'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png',
        width: 50,
      ),
      Text('京东超市', style: TextStyle(fontSize: 14)),
    ],
  ),
  Column(
    children: [
      Image.network(
        'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png',
        width: 50,
      ),
      Text('京东超市', style: TextStyle(fontSize: 14)),
    ],
  ),
  Column(
    children: [
      Image.network(
        'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png',
        width: 50,
      ),
      Text('京东超市', style: TextStyle(fontSize: 14)),
    ],
  ),
  Column(
    children: [
      Image.network(
        'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png',
        width: 50,
      ),
      Text('京东超市', style: TextStyle(fontSize: 14)),
    ],
  ),
];
